<template>
  <!-- 选择竣工评价评分表 -->
  <a-modal title="选择竣工评价评分表" :width="1000" :visible="modalVisible" @ok="handleConfirm" @cancel="handleCancel">
    <a-spin :spinning="loading">
        <!-- 搜索 -->
        <a-form-model 
          layout="inline" 
          ref="ruleForm" 
          :model="searchArr"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="评价人" prop="gradeEmployeeName">
            <a-input v-model="searchArr.gradeEmployeeName" placeholder="请输入"></a-input>
          </a-form-model-item>
          <a-form-model-item label="评价表名称" prop="tableName">
            <a-input v-model="searchArr.tableName" placeholder="请输入"></a-input>
          </a-form-model-item>
          <a-form-model-item :wrapperCol="{ span: 24 }">
            <div class="flex">
              <a-button
                type="primary"
                @click="onSubmit"
              >
                搜索
              </a-button>
              <a-button style="margin-left: 8px;" @click="handleReset">
                重置
              </a-button>
            </div>
          </a-form-model-item>
        </a-form-model>
        <!-- 表格 -->
        <a-table
          style="margin-top: 20px;"
          tableLayout="fixed"
          rowKey="id"
          size="default"
          :columns="columns"
          :row-selection="{ type: 'checkbox', selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps: getCheckboxProps }"
          bordered
          :dataSource="dataSource"
          :pagination="{
            current: pageNo,
            showQuickJumper: true,
            showSizeChanger: true,
            pageSize: pageSize,
            showTotal: (total) => `共 ${total} 条数据`,
            total: total
          }"
          @change="handleTableChange"
        >
        </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
import { riskGrade } from '@/api/quality/riskGrade' // api
export default {
  name: 'ChooseFinishGradeList',
  components: {
  },
  data() {
    return {
      selectedRowKeys: [],
      loading: false, //表格加载
      queryParam: {}, // 查询参数
      dataSource: [], // 信息列表
      labelCol: { span: 7 },
      wrapperCol: { span: 17 },
      searchArr: {
        gradeEmployeeName: '',
        tableName: ''
      },
      selectedRows: [],
      columns: [
        {
          title: '考核得分',
          ellipsis: true,
          dataIndex: 'percentileSystemScore'
        },
        {
          title: '评价时间',
          ellipsis: true,
          dataIndex: 'fillerDate'
        },
        {
          title: '评价人',
          ellipsis: true,
          dataIndex: 'gradeEmployeeName'
        },
        {
          title: '评价表名称',
          dataIndex: 'tableName',
        },
      ], // 表头
      pageSize: 10,
      pageNo: 1,
      total: 0
    }
  },
  computed: {
    modalVisible: {
      get: function(){
        return this.visible
      },
      set: function(val){
        this.$emit('update:visible', val)
      }
    },
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: () => {
        return {
          selectedRowKeys: [],
          id: '',
          typeCode: '',
          projectId: '',
        }
      }
    }
  },
  watch: {
    visible(e){
      if (e) {
        this.onReset()
        this.loadData()
      }
    }
  },
  methods: {
    getCheckboxProps(record) {
      return {
        props: {
          disabled: this.info.selectedRowKeys.includes(record.id),
        }
      }
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    /**
     * 表格分页、排序、筛选变化时触发
     */
    handleTableChange(pagination){
      this.pageNo = pagination.current
      this.pageSize = pagination.pageSize
      this.loadData()
    },
    /**
     * 请求表格数据
     */
    loadData() {
      const requestParameters = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        cate: '1',
        typeCode: '2',
        status: '1',
        projectId: this.info.projectId,
        ...this.queryParam,
      }
      this.loading = true
      riskGrade
        .postList(requestParameters)
        .then((res) => {
          this.loading = false
          this.total = res.totalSize
          this.dataSource = res.data
        })
        .catch(() => {
          this.loading = false
        })
    },
    /**
     * @description: 确认选择
     */
    handleConfirm() {
      this.$emit('closeModal')
      this.$emit('handleConfirm', {
        rows: this.selectedRows,
        index: 0,
        typeCode: '2'
      })
      // 重置搜索表单
      this.resetForm()
    },
    handleCancel() {
      this.$emit('closeModal')
      // 重置搜索表单
      this.resetForm()
    },
    // 重置
    onReset() {
      this.selectedRowKeys = this.info.selectedRowKeys
      this.dataSource = []
      this.queryParam = {}
      this.pageSize = 10
      this.pageNo = 1
    },
    // 搜索
    onSubmit() {
      let values = this.$clone(this.searchArr)
      for (let prop in values) {
        if ((values[prop] ?? '') === '') {
          delete values[prop]
        }
      }
      values && (this.queryParam = values)
      this.loadData()
    },
    handleReset() {
      this.resetForm()
      this.onSubmit()
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  }
}
</script>